~:extend('_index')~





~[body]~

    <style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }

      /* Custom container */
      .container-narrow {
        margin: 0 auto;
        max-width: 700px;
      }
      .container-narrow > hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 60px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }
    </style>
  <body>


    <div class="container-narrow">


<div class="navbar">

    <div class="container">
 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
 
      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="">YouWebapp</a>
 
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
       <ul class="nav nav-pills pull-right">
        <li class='active'><a href='#'><i class='icon-home'></i></a></li>
            ~~:raw($data);~        
        </ul>        
      </div>

    </div>

</div>
        <!-- JiaThis Button BEGIN -->
          <div class="jiathis_style">
            <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jialike" target="_blank"><img src="http://v3.jiathis.com/code_mini/images/btn/v1/jialike1.gif" border="0" />  
          </a>
            <a class="jiathis_like_tsina"></a>
          </div>
        <!-- JiaThis Button END -->
        <br/>   
    <div id="messenger">
      ~~:raw($messenger.jq)~
      <div class="alert alert-success">
        <strong>提示: </strong> ~~:escape($messenger.content)~
        <button type="button" class="close" data-dismiss="alert">&times;</button>
      </div>
    </div>
      <hr>

      <div class="jumbotron">
        <h1>简单</h1>
        <p class="lead">“简单”地做个Webapp。只需要三步。什么是Webapp? 对于很多人来说不需要很复杂地解释，其实就是一个适合手机游览的网页而已。</p>
        ~~:raw($button)~

      </div>

      <hr>

      <div class="row-fluid marketing">    
        <p  style="text-align: center;"><small class="muted">具体Webapp的效果，试下扫瞄下面的QR码看看就知道了！</small></p>
          <ul class="thumbnails">
              <li class="span4">
                <div class="thumbnail">
                  <img data-src="holder.js/200x200" alt="200x200" style="width: 200px; height: 200px;" src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://youwebapp.com/about">
                  <div class="caption" >
                    <h3 class="text-info" style="text-align: center; margin-top:-20px;">第一步</h3>
                    <p>当然首先要注册加入我们啦！只需要E-MAIL和输入两次密码就可以了。</p>
                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <img data-src="holder.js/200x200" alt="200x200" style="width: 200px; height: 200px;" src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://youwebapp.com/webapp/contact">
                  <div class="caption">
                    <h3 class="text-info" style="text-align: center;margin-top:-20px;">第二步</h3>
                    <p>登陆帐号，(主页上还有些小提示)，然后点击“添加”，进入“添加”界面。</p>

                  </div>
                </div>
              </li>
              <li class="span4">
                <div class="thumbnail">
                  <img data-src="holder.js/200x200" alt="200x200" style="width: 200px; height: 200px;" src="http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://youwebapp.com/webapp/vcard">
                  <div class="caption">
                    <h3 class="text-info" style="text-align: center;margin-top:-20px;">第三步</h3>
                    <p>添加过程只需输入“题目”和“内容”，添加完成后在“编辑”界面还有很多功能。</p>

                  </div>
                </div>
              </li>
            </ul>
      </div>

      <hr>

      <div class="footer">
        <p>&copy; YouWebapp ~~date("Y");~</p>
     

      </div>

  </div>
<script type="text/javascript" src="http://v3.jiathis.com/code_mini/jia.js" charset="utf-8"></script>   
~[/body]~

